<template>
	<view class="content">
		<view class="one-car" v-for="(item,index) in carList" :key='index'>
			<view class="title">{{item.car_model}}</view>
			<view class="car-infor">
				<view class="name">{{item.license_plate}}</view>
				<view class="status">已认证</view>
			</view>
		</view>
		<view style="width:100%;height:140rpx;"></view>
		<view class="add-btn" @click="addCar">
			添加爱车
		</view>
	</view>
</template>

<script>
	import { myCars } from '../../request/api.js'
	export default {
		data() {
			return {
				carList:[]
			}
		},
		onShow() {
			this.getMyCars()
		},
		methods: {
			async getMyCars(){
				uni.showLoading({
					title:'加載中...'
				})
				let res=await myCars();
				uni.hideLoading();
				console.log(res);
				if(res.code==1){
					this.carList=res.data.data;
				}else{
					uni.showToast({
						title:res.msg,
						icon: 'none'
					})
				}
			},
			addCar(){
				uni.navigateTo({
					url:'/pages/add-car/add-car'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
		.content{
			width:702rpx;margin-left:auto;
			margin-right:auto;
			.one-car{
				width:100%;height:181rpx;
				background-color:#Ffffff;
				border-radius: 15rpx;
				box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				margin-top:24rpx;box-sizing: border-box;padding:24rpx;
				.title{
					border-bottom:1px solid #F0F0F0;padding-bottom:24rpx;
					font-size:30rpx;line-height:42rpx;color:#040404;
				}
				.car-infor{
					padding-top:24rpx;display: flex;align-items: center;
					justify-content: space-between;font-size:30rpx;
					line-height:42rpx;color:#040404;
					.status{
						color:#D71B0A;font-size: 26rpx;
					}
				}
			}
			.add-btn{
				width:650rpx;height:98rpx;background-color:#040404;
				display: flex;align-items: center;justify-content: center;
				border-radius: 98rpx;font-size:36rpx;color:#Ffffff;
				position: fixed;bottom:30rpx;left:50rpx;
			}
		}
	}
</style>
